import React, { useEffect, useState } from 'react';
import { SearchBar, InputItem, Icon, List } from 'antd-mobile';
import SelectPanel from 'components/common/selectPanel';
import SelfHead from 'components/common/selfHead';
import ListItem from './components/listItem';
import Paging from 'components/common/paging';
import SelfPicker from 'components/common/selfPicker';
import { getCompAddList, getDicType } from 'ser/actions';
import storage from 'dic/storage';

import './index.less';

const Item = List.Item;
// 运力企业
function CaEntp(props) {
  const { type } = props.location.query;
  const [list, setList] = useState([]);
  const [dic1, setDic1] = useState([]);
  const [dic2, setDic2] = useState([]);
  const [dic3, setDic3] = useState([]);
  const [dic, setDic] = useState([]);
  const [tic1, setTic1] = useState([]);
  const [tic, setTic] = useState([]);
  // const [tic2, setTic2] = useState([])
  // const [tic3, setTic3] = useState([])
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(30);
  const [companyName, setCompanyName] = useState('');
  const [transportCategory, setTransportCategory] = useState('');
  const [transportType, setTransportType] = useState('');
  const [storeCategory, setStoreCategory] = useState('');
  const [storeType, setStoreType] = useState('');
  const [done, setDone] = useState(false);
  useEffect(() => {
    async function getDic() {
      if (type === '0') {
        const dic1 = await getDicType({ value: 'transportCategory' }); // 运输类别
        const dic2 = await getDicType({ value: 'natTransportType' }); // 常温运输类型
        const dic3 = await getDicType({ value: 'coldTransportType' }); // 冷链运输类型
        if (dic1.code === 0) {
          dic1.rows.map(i => (i.label = i.name));
          setDic1(dic1.rows);
        }
        if (dic2.code === 0) {
          setDic2([
            ...dic2.rows.map(i => {
              return {
                value: dic1.rows[0].value + ',' + i.value,
                label: dic1.rows[0].label + '-' + i.name,
              };
            }),
          ]);
        }
        if (dic3.code === 0) {
          setDic3([
            ...dic3.rows.map(i => {
              return {
                value: dic1.rows[1].value + ',' + i.value,
                label: dic1.rows[1].label + '-' + i.name,
              };
            }),
          ]);
          setDic([
            ...dic2.rows.map(i => {
              return {
                value: dic1.rows[0].value + ',' + i.value,
                label: dic1.rows[0].label + '-' + i.name,
              };
            }),
            ...dic3.rows.map(i => {
              return {
                value: dic1.rows[1].value + ',' + i.value,
                label: dic1.rows[1].label + '-' + i.name,
              };
            }),
          ]);
        }
      } else {
        // const tic1 = await getDicType({ value: 'storeCategory' }) // 仓储类别
        // const tic2 = await getDicType({ value: 'natStoreType' }) // 常温仓储类型
        // const tic3 = await getDicType({ value: 'coldStoreType' }) // 冷链仓储类型
        // if (tic1.code === 0) {
        //   tic1.rows.map((i) => i.label = i.name)
        //   setTic1(tic1.rows)
        // }
        // if (tic2.code === 0) {
        //   tic2.rows.map((i) => i.label = i.name)
        //   setTic2(tic2.rows)
        // }
        // if (tic3.code === 0) {
        //   console.log(tic3)
        //   tic3.rows.map((i) => i.label = i.name)
        //   setTic3(tic3.rows)
        // }
        setTic1(storage.prop);
        setTic(storage.type);
      }
    }
    getDic();
  }, []);
  useEffect(() => {
    async function fetchData() {
      setPageNumber(1);
      const res = await getCompAddList({
        pageNumber,
        pageSize,
        companyName,
        transportCategory,
        transportType,
        storeCategory,
        storeType,
        flag: type,
      });
      res.rows && setList([...res.rows]);
    }
    fetchData();
  }, [transportCategory, transportType, storeCategory, storeType, companyName]);
  useEffect(() => {
    async function fetchData() {
      const res = await getCompAddList({
        pageNumber,
        pageSize,
        companyName,
        transportCategory,
        transportType,
        storeCategory,
        storeType,
        flag: type,
      });
      if (res.rows.length) {
        setDone(false);
        setList([...list, ...res.rows]);
      } else {
        setDone(true);
      }
    }
    fetchData();
  }, [pageNumber, pageSize]);
  function handleChange(v, label) {
    setPageNumber(1);
    switch (label) {
      case '运输类别':
        setTransportCategory(v[0]);
        if (v[0] === '01') {
          setDic(dic2);
          setTransportType(
            dic2.some(item => item.value.slice(3) === transportType)
              ? transportType
              : '',
          );
        }
        if (v[0] === '02') {
          setDic(dic3);
          setTransportType(
            dic3.some(item => item.value.slice(3) === transportType)
              ? transportType
              : '',
          );
        }
        break;
      case '运输类型':
        setTransportType(v[0].slice(3));
        setTransportCategory(v[0].slice(0, 2));
        break;
      case '仓储类别':
        setStoreCategory(v[0]);
        setStoreType('');
        setTic(storage.type.filter(item => item.pLabel === v[0]));
        break;
      case '仓储类型':
        setStoreCategory(
          storage.type.find(item => item.value === v[0])['pLabel'],
        );
        setStoreType(v[0]);
        break;
    }
  }
  return (
    <div className="caEntp">
      <SelfHead title={type === '0' ? '运力企业' : '仓储企业'} />
      <div className="head">
        <InputItem
          className="searchInput"
          placeholder="输入企业名称"
          onChange={v => setCompanyName(v)}
        >
          <Icon type="search" size={'sm'} />
        </InputItem>
      </div>
      <div className="head">
        {type === '0' ? (
          <>
            <SelfPicker
              label="运输类别"
              cols={1}
              pickerData={dic1}
              handlePickerChange={handleChange}
            />
            <SelfPicker
              label="运输类型"
              cols={1}
              pickerData={dic}
              handlePickerChange={handleChange}
            />
          </>
        ) : (
          <>
            <SelfPicker
              label="仓储类别"
              cols={1}
              pickerData={tic1}
              handlePickerChange={handleChange}
            />
            <SelfPicker
              label="仓储类型"
              cols={1}
              pickerData={tic}
              handlePickerChange={handleChange}
            />
          </>
        )}
      </div>
      <div className="content">
        <Paging
          render={() =>
            list.length > 0 &&
            list.map((item, index) => {
              return <ListItem key={item.companyId} item={item} type={type} />;
            })
          }
          handlePageChange={() => setPageNumber(pageNumber + 1)}
          done={done}
        />
      </div>
    </div>
  );
}

export default CaEntp;
